<template>
  <div>
    <canvas id="chart" width="400" height="300"></canvas>
  </div>
</template>

<script>
import { onMounted } from 'vue';
import Chart from 'chart.js/auto';

export default {
  name: 'ResultChart',
  props: {
    data: Object
  },
  setup(props) {
    onMounted(() => {
      new Chart(document.getElementById('chart'), {
        type: 'bar',
        data: {
          labels: Object.keys(props.data),
          datasets: [
            {
              label: '人数',
              data: Object.values(props.data),
              backgroundColor: '#409EFF'
            }
          ]
        }
      });
    });
  }
};
</script>
